<template>
  <div class="home">
		<div class="box">
			<h5>欢迎您，{{$store.state.username}}</h5>
			<p>为您带来今天的疫情信息:</p>
		</div>
		
		<div id="myChart" style="width: 85vw;height: 80vh;"></div>
		
  </div>
</template>

<script>
// @ is an alias to /src
import * as echarts from 'echarts' 
import chinaJson from '@/utils/china.json'
// console.log(chinaJson)

export default {
  data() {
		return {
			myChart: '',
			province: '',
			province: {
				"北京": "beijing",
				"天津": "tianjin",
				"上海": "shanghai",
				"重庆": "chongqing",
				"河北": "hebei",
				"河南": "henan",
				"云南": "yunnan",
				"辽宁": "liaoning",
				"黑龙江": "heilongjiang",
				"湖南": "hunan",
				"安徽": "anhui",
				"山东": "shandong",
				"新疆": "xinjiang",
				"江苏": "jiangsu",
				"浙江": "zhejiang",
				"江西": "jiangxi",
				"湖北": "hubei",
				"广西": "guangxi",
				"甘肃": "gansu",
				"山西": "shanxi",
				"内蒙古": "neimenggu",
				"陕西": "shanxi1",
				"吉林": "jilin",
				"福建": "fujian",
				"贵州": "guizhou",
				"广东": "guangdong",
				"青海": "qinghai",
				"西藏": "xizang",
				"四川": "sichuang",
				"宁夏": "ningxia",
				"海南": "hainan",
				"台湾": "taiwan",
				"香港": "xianggang",
				"澳门": "aomen"
			},	
		}
	},
	created() {
			
	},
	mounted() {
		this.initMap('china', chinaJson)
		this.myChart.on('click', (e) => {
				this.handleGetProvince(e)
		})
	},
	methods: {
		 // 初始化地图
		initMap(name, json) {
			this.myChart = echarts.init(document.getElementById('myChart'))
			echarts.registerMap(name, json)
			var option = { // 配置option.geo才能显示地图
				geo: {
					map: name,
					itemStyle: {
							areaColor: 'skyblue',
							color: '#fff',
							borderColor: '#fff',
					},
					selectedMode: 'single',
					label: {
							show: true, // 显示省份名称
							position: 'left',
					},
					emphasis: {
							label: {
									color: '#fff'
							},
							itemStyle: {
									color: '#1e90ff'
							}
					},
					roam: true, // 滚轮缩放
					scaleLimit: {  // 缩放大小限制
							min: 1,
							max: 3
					}
				},
				tooltip: {
						triggerOn: "mousemove",
						formatter: function (e) {
								return e.name
						}
				},
				series: [{  // 配置series后tooltip才能生效
						name: "省份",
						type: "map",
						geoIndex: 0,
						data: []
				}],
			}
			this.myChart.resize()
			// 使用刚指定的配置项和数据显示图表。
			this.myChart.setOption(option);
		},
	}
}
</script>

<style lang="scss" scoped>
	.home {
		.box {
			padding: 15px 20px;
			h5 {
				font-size: 18px;
			}
		}
		#myChart {
			// border: 1px solid red;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
